<template>
	<view class="animated fadeIn faster bg-fff" style="min-height: 100vh;">
		<view class="py-4 mb-1">
			<view class="d-flex d-flex-center mb-3"><text class="font26">考试结束</text></view>
			<view class="d-flex d-flex-center mb-3">
				<text class="font26">评级：</text><text class="font26 colorgreen">合格</text>
			</view>
			<view class="d-flex d-flex-center d-flex-middle">
				<text class="font26">你的正确率为：</text>
				<text class="font36 colorgreen font-bold">80%</text>
			</view>
		</view>
		<view class="px-3 d-flex d-flex-wrap">
			<view class="span-3 d-flex d-flex-center mb-2" v-for="(an,index) in 100" :key="index">
				<view class="an-circle position-relative">
					<text>{{index+1}}</text>
				</view>
			</view>
		</view>
		
		<view style="height: 140rpx;"></view>
		<view class="position-fixed bottom-0 left-0 right-0 bg-fff z-index-100 px-3 pt-3 pb-4" @click="goBack">
			<view class="reset-bg d-flex d-flex-middle d-flex-center rounded40">重做试题</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				answers:[]
			}
		},
		methods: {
			goBack(){
				uni.navigateTo({
					url:'/subPages/evaluation/evaluation'
				})
			}
		}
	}
</script>

<style scoped>
.reset-bg {
	border: 1px solid rgba(255, 161, 140, 1);
	color: #D43030;
	background-color: rgba(255, 87, 51, 0.3);
	height: 70rpx;
}
.colorgreen{
	color: #006E2C;
}
.an-circle{
	width: 60rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	border-radius: 60rpx;
	font-size: 26rpx;
	color: #555;
	border: solid 1px #dddddd;
	overflow: hidden;
}
.an-circle-curr{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30rpx;
	background-color: rgba(0,0,0,.6);
	font-size: 18rpx;
	color:#fff
}
.an-circle-correct{
	background-color: #3dc092;
	color: #fff;
	border-color: #3dc092;
}
.an-circle-wrong{
	background-color: #f5615e;
	color: #fff;
	border-color: #f5615e;
}
</style>
